<script setup>
    import AddressCard from '@/components/address/Address.vue'
    import useUserStore from '@/stores/user.js'
    import { computed } from 'vue'
    import { useRouter } from 'vue-router'

    const user = useUserStore()
    const router = useRouter()
    const userList = computed(()=>{
        return user.userList.find(item => item.name === 'zhangsan')
    })

    //对用户数据库内的选中地址数据库进行赋值
    const onAddress = (index)=>{
        userList.value.currentAddress = userList.value.addressList[index]
        router.go(-1)
    }

    //点击跳转到新建地址页面
    const goAddAddress = ()=>{
        router.push({
            path:'/createAddressView'
        })
    }

    //点击放回按钮回到地址页面或者订单页面
    const goOrderOrAddress = ()=>{
        router.go(-1)
    }
    
</script>

<template>
  <div class="address_list">
        <div class="address_list_header">
            <span class="iconfont title_back" @click="goOrderOrAddress">&#xe697;</span>
            <div class="title_text">收货地址</div>
            <div class="create" @click="goAddAddress">新建</div>
       </div>
        <div class="address_list_content">
            <div class="address_list_content_item" v-for="(item, index) in userList.addressList" :key="index" @click="onAddress(index)">
                <AddressCard :address="item" />
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.address_list {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: $dark-bgColor;
    overflow-y: scroll;

    &_header {
        padding: .08rem .18rem;
        font-size: .16rem;
        color: $content-fontcolor;
        text-align: center;
        line-height: .24rem;
        background-color: $bgColor;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
    }

    &_content {
        margin-top: .58rem;
    }
}
</style>